<template>
	<view class="content">
		<view class="form-block" style="border-radius:30rpx 30rpx 0 0 ;">
			<view class="form-title">编辑语言能力</view>
			<view class="form-item">
				<view class="form-label">语言</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="languages" range-key="languages" :value="languagesIndex" @change="bindLanguages">{{languages[languagesIndex]['languages']}}</picker>
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label">熟练程度</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="proficiency" range-key="data" :value="proficiencyIndex" @change="bindProficiency">{{proficiency[proficiencyIndex]['data']}}</picker>
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label">语言等级</view>
				<view class="form-content">
					<input v-model="form.cert" maxlength="30" type="text" placeholder-class="inputPlaceholder" placeholder="请填写" class="form-ctrl" />
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
			<view class="btn" @click="handleSave">保存</view>
		</view>
	</view>
</template>

<script>
import {submitLanguage,getLangById} from '@/api/resume.js';
import {getLanguage as getLanguageApi,getProficiency as getProficiencyApi} from '@/api/config.js'
import { validate } from '@/util/validate';
import { getPickerIndex } from '@/util/util';
	export default {
		data(){
			return{
				form:{
					id:0,
					languages: '',
					redAndWrt: '',
					cert: '',
				},
				rules:{
					languages:{
						name:'语言',
						required:true
					},
					redAndWrt:{
						name:'熟练程度',
						required:true
					},
					cert:{
						name:'语言等级',
						required:true
					}
				},
				languages:[],
				languagesIndex:0,
				
				proficiency:[],
				proficiencyIndex:0,
			}
		},
		methods:{
			bindLanguages(e){
				this.languagesIndex=e.detail.value
			},
			bindProficiency(e){
				this.proficiencyIndex=e.detail.value
			},
			handleSave(){
				let form=JSON.parse(JSON.stringify(this.form));
				form.redAndWrt=this.proficiency[this.proficiencyIndex].id;
				form.languages=this.languages[this.languagesIndex].id;
				if(validate(form,this.rules)){
					uni.showLoading({
						title:'提交中',
						mask:true
					})
					submitLanguage(form).then(()=>{
						uni.$emit('refresh',5);
						this.showToast('保存成功',()=>{
							uni.navigateBack()
						})
					})
				}
			},
			getDetail(id){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				getLangById({id}).then((res)=>{
					this.languagesIndex=getPickerIndex(res.languages,this.languages)
					this.proficiencyIndex=getPickerIndex(res.redAndWrt,this.proficiency)
					this.form=res
				})
			},
			getLanguages(){
				return getLanguageApi({}).then((res)=>{
					this.languages=res
				})
			},
			getProficiency(){
				return getProficiencyApi({}).then((res)=>{
					this.proficiency=res
				})
			}
		},
		onLoad(e){
			uni.showLoading({
				title:'加载中',
				mask:true
			})
			Promise.all([this.getLanguages(),this.getProficiency()]).then(()=>{
				if(e.id){
					this.getDetail(e.id)
				}
			})
		}
	}
</script>

<style lang="scss">
	page{
		background: #fff;
	}
	.content{
		width: 100%;
		.btn{
			width: 350rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #FF7626;
			color: #fff;
			font-size: 28rpx;
			border-radius: 40rpx;
			margin: 0 auto;
			margin-top: 30rpx;
		}
		.user-photo-block{
			width: 100%;
			height: 450rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.user-photo{
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
			}
		}
		.form-block{
			width: 100%;
			box-shadow: 0 0 10px 0 #efefef;
			background: #fff;
			padding: 30rpx;
			.form-title{
				font-size: 36rpx;
				font-weight: bold;
			}
			.sub-title{
				font-size: 26rpx;
				color: #999;
			}
			.form-item{
				display: flex;
				flex-direction: column;
				border-bottom: 1px solid #efefef;
				padding-top: 30rpx;
				.form-label{
					font-size: 28rpx;
					color: #999;
				}
				.form-content{
					display: flex;
					flex-direction: row;
					align-items: center;
					.form-ctrl{
						height:100rpx;
						line-height: 100rpx;
						flex-grow: 1;
					}
					.arrow{
						flex-grow: 0;
						color: #999;
						font-size: 24rpx;
					}
				}
			}
		}
	}
	
</style>